<template>
  <div class="w-full md:w-[90%] mx-auto">
    <div class="text-2xl font-bold">Search Results for "{{ searchKey }}"</div>
    <div class="text-gray-500">Found {{ searchResults.length }} results</div>
    <div class="mt-4">
      <!-- 一级分类和二级分类名字直接使用每个app中的属性 -->
      <BusinessAppList :appList="processedSearchResults" />
    </div>
    <AdsGoogleAdCollect slot-type="searchDisplay1" />
    <!-- 推荐应用 -->
    <div class="bg-white">
      <h2 class="text-lg font-bold text-gray-800 mb-4">Recommended For You</h2>
      <BusinessAppList :appList="processedAppList" />
    </div>
  </div>
</template>

<script setup>
import AppList from '@/assets/data/reconmmed.json'
import { replaceImageDomains } from '~/utils/configHelper'

const route = useRoute()
const searchKey = route.query.searchKey || ''
const hostname = useHostname()

// 处理后的应用列表，应用图片域名替换
const processedAppList = computed(() => {
  return replaceImageDomains(AppList, hostname)
})

// 处理后的搜索结果，应用图片域名替换
const processedSearchResults = computed(() => {
  return replaceImageDomains(searchResults.value || [], hostname)
})

// 获取搜索结果
const { data: searchResults } = await useAsyncData('searchResults', async () => {
  const response = await $fetch(`/api/search/${encodeURIComponent(searchKey)}`)
  return response.data || []
})
onMounted(() => {
  logEvent('SearchResult_Page_Show', {
    KeyWord: searchKey
  })
})
</script>

<style scoped>
</style>